<template>
  <div class="recommend">
    <!-- <h1>{{$route.params.id }}</h1> -->
    <template  v-for="(children, index) in Recommend ? Recommend : []">
    <BannerPage v-if="children.type === 'uiBanner'" :children="children" :key="index"></BannerPage>
    
    <SmallCard v-if=" children.type==='uiMiddleCard'" :children="children" :key="index"></SmallCard>
    <UiBigCardTop v-if=" children.type==='uiBigCardTop'" :children="children" :key="index"></UiBigCardTop>
    <UiCreator v-if="children.type === 'uiCollectionSlideOne'" :children="children" :key="index"></UiCreator>
    <UiTitle v-if="children.type==='mTitle'" :children="children" :key="index"></UiTitle>
    <HotNav v-if="children.type==='uiFunction'" :children="children" :key="index"></HotNav>
    <BigCard  v-if=" children.type==='uiBigCard'" :children="children" :key="index"></BigCard>
 
       <!-- <NavigationDetails :item="item" :key="index" /> -->
    </template>
    <!-- <div
      class="banner-nav"
      v-for="(item, index) in Recommend ? Recommend : []"
      :key="index"
        :class="item.type"
    >
      
    
    </div> -->
     
  </div>
</template>

<script>
// import NavigationDetails from "@/components/NavigationDetails.vue";
import BannerPage from "@/components/BannerPage.vue";
import SmallCard from '@/components/SmallCard.vue'
import BigCard from '@/components/BigCard.vue'
import UiTitle from '@/components/UiTitle.vue'
import HotNav from '@/components/HotNav.vue'
import UiCreator from '@/components/UiCreator.vue'
import UiBigCardTop from '@/components/UiBigCardTop.vue'
// import ArticleCard from '@/components/ArticleCard.vue'
// import { Toast } from "vant";
import { mapMutations } from 'vuex';
export default {
   props:["NavList","Recommend"],
  data: function () {
    return {
    
    };
  },
  components: {
  
    BannerPage,
    SmallCard,
    BigCard,
    UiTitle,
    HotNav,
    UiCreator,
    UiBigCardTop,
 
   
  },
  created:function(){
    this.NavList.forEach((ele,index) => {
      if(this.$route.fullPath==ele.link){
        this.updateActive({active:index})
      }
    });
    
    
    


},
methods:{
     getVideoId(children) {
      console.log(children.children[0].model.resource.id);
      // this.$router.push({ path: "/home/classify" });
      this.$router.push({ path: "/classify" })
      this.$store.commit("getIdVideo",{id:children.children[0].model.resource.id})
    },
   ...mapMutations(["updateActive"])
},
  
  beforeRouteUpdate(to, from, next) {
    this.NavList.forEach((ele,index) => {
      console.log(this.$route.fullPath==ele.link);
      if(this.$router.fullPath==ele.link){
        this.updateActive({active:index})
      }
    });
    // Toast({
    //   message: "自定义图片",
    //   icon: "https://img01.yzcdn.cn/vant/logo.png",
    //   duration: 0,
    // });
    // this.name = to.params.id;
    // var vueID=to.query!=null?`?cateName=${to.query.cateName}&channel=${to.query.channel}`:''
    // console.log(this.name);
    // console.log(vueID);
    // this.axios
    //   .get("https://apis.netstart.cn/xpc/home/" + this.name+vueID)
    //   .then((res) => {
    //     this.Recommend = res.data.data.children;
    //     console.log(res.data.data.children);
    //     Toast.clear()
        
    //   });

  
    next();
  },
};
</script>


<style lang="less" scoped>
.recommend {
  display: flex;
  flex-wrap: wrap;
  background: whitesmoke;
   width: 100vw;
   overflow: hidden;
 
  justify-content: space-around;

}
</style>